jQuery(function($) {

    var categories = [
        'Tokyo',
        'Jakarta',
        'New York',
        'Seoul',
        'Manila',
        'Mumbai',
        'Sao Paulo',
        'Mexico City',
        'Dehli',
        'Osaka',
        'Cairo',
        'Kolkata',
        'Los Angeles',
        'Shanghai',
        'Moscow',
        'Beijing',
        'Buenos Aires',
        'Guangzhou',
        'Shenzhen',
        'Istanbul'
    ];
    var data = [34.4, 21.8, 20.1, 20, 19.6, 19.5, 19.1, 18.4, 18,
        17.3, 16.8, 15, 14.7, 14.5, 13.3, 12.8, 12.4, 11.8,
        11.7, 11.2
    ];
//    var x_y_data =[{name:'MLeo',y:30},{name:"Chochy",y:50},{name:"lb52406",y:20}];


    $('#container').highcharts({
        //图形属性
        chart: {
            type: 'column', //图形类型
            margin: [50, 50, 100, 80]//图形位置
        },
        //标题
        title: {
            text: 'World\'s largest cities per 2008'//标题内容
        },
        //二级标题
        subtitle: {
            text: '柱形图展示',
            x: -20
        },
        //X轴标题
        xAxis: {
            //X轴标题内容
            categories: categories,
            //X轴标题显示属性
            labels: {
                rotation: -45, //X轴标题旋转角度
                align: 'right', //X轴标题对齐方式
                //X轴文字样式
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        },
        //Y轴标题
        yAxis: {
            min: 0,
            //Y轴标题内容
            title: {
                text: 'Population (millions)'
            }
        },
        //图例展示：true/false
        legend: {
            enabled: true
        },
        //鼠标经过图表上的提示
        tooltip: {
            pointFormat: 'Population in 2008: <b>{point.y:.2f} millions</b>'//:.2f 格式
        },
        //柱形图数据信息展示
        series: [{
                name: 'Population', //图例名称
                //柱形图数据
                data: data,
                //数据信息显示属性
                dataLabels: {
                    enabled: true, //展示：true/false
                    rotation: -90, //旋转角度
                    color: '#FFFFFF', //颜色
                    align: 'right', //对齐方式
                    x: 3, //柱形图图柱中横向偏离
                    y: 10, //柱形图图柱中纵向偏离
                    //Y轴文字样式
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Verdana, sans-serif',
                        textShadow: '0 0 3px black'
                    }
                }
            }]
    });
});

